<template>
  <div class="main">
    <van-tabs color="#008fef" class="tabs" v-model="active">
      <van-tab title="申请入股"></van-tab>
      <van-tab title="我的成员"></van-tab>
    </van-tabs>

    <div class="content">
      <template v-if="active == 0">
        <div class="apply">
          <div class="rule">
            <div class="product-contro" v-html="rule"></div>
          </div>
          <template v-if="isFenHong == '0'">
            <button type="button" class="foot-btn" @click="handleApply">我要报名</button>
          </template>
          <template v-if="isFenHong == '1'">
            <button type="button" class="foot-btn red">待审核</button>
          </template>
          <template v-if="isFenHong == '5'">
            <button type="button" class="foot-btn" @click="handleApply">已拒绝，请重新提交</button>
          </template>
          <template v-if="isFenHong == '10'">
            <button type="button" class="foot-btn">审核通过，您已经是会员</button>
          </template>
          <template v-if="isFenHong == '20'">
            <button type="button" class="foot-btn">已退股</button>
          </template>
        </div>
      </template>

      <template v-else>
        <template v-if="type == -1">
          <div class="mt">
            <EmptyTips mWidth="30" mHeight="30" text="您还不是我们的会员，赶快申请入会吧！" :image="NotMemberEmpty"/>
            <ActionButton class="blue-btn" text="申请入股"/>
          </div>
        </template>
        <template v-if="type == 0">
          <div class="mt">
            <EmptyTips
              mWidth="30"
              mHeight="30"
              text="您还没有成员，赶快去邀请您的小伙伴成为您的成员吧"
              :image="NoMemberEmpty"
            />
            <ActionButton class="blue-btn" text="邀请入股"/>
          </div>
        </template>
        <template v-if="type == 1">
          <div class="mt">
            <EmptyTips mWidth="30" mHeight="30" text="待审核，请耐心等待" :image="NoMemberEmpty"/>
            <ActionButton class="blue-btn" text="待审核"/>
          </div>
        </template>
        <template v-if="type == 5">
          <div class="mt">
            <EmptyTips mWidth="30" mHeight="30" text="您已被拒绝" :image="NoMemberEmpty"/>
            <ActionButton class="blue-btn" text="重新申请"/>
          </div>
        </template>
        <template v-if="type == 10">
          <van-list v-model="loading" :finished="finished" @load="onLoad">
            <div class="item" v-for="(item, index) in list" :key="index">
              <img :src="item.face" alt srcset>
              <span class="user">{{item.nickname}}</span>
            </div>
          </van-list>
          <div class="footer">
            <ActionButton class="blue-btn" text="邀请入股"/>
          </div>
        </template>

        <template v-if="type == 20">
          <div class="mt">
            <EmptyTips mWidth="30" mHeight="30" text="您已退股" :image="NoMemberEmpty"/>
            <ActionButton class="blue-btn" text="重新申请"/>
          </div>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import api from "../../api";
import EmptyTips from "@/components/common/EmptyTips";
import NoMemberEmpty from "../../assets/common/no-member-empty.png";
import NotMemberEmpty from "../../assets/common/not-member-empty.png";
import ActionButton from "@/components/common/ActionButton";

export default {
  title: "我要分红",
  components: {
    EmptyTips,
    ActionButton
  },
  data() {
    return {
      active: 0,
      uid: this.$store.state.uid,
      NoMemberEmpty,
      NotMemberEmpty,
      isFenHong: "",
      rule: "",
      type: "", //-1就是还没申请过，0代表已经是会员，但是没有下级成员，1代表已经是会员，并且有下级成员
      page: 1,
      list: [],
      loading: false,
      finished: false
    };
  },
  methods: {
    getUserIsFenHong() {
      api.usercenter.getUserIsFenHong(this.uid, res => {
        this.isFenHong = res.status;
      });
    },
    getProfitRule() {
      api.usercenter.getProfitRule(res => {
        this.rule = res.body;
      });
    },
    handleApply() {
      this.$routerPush(this, "/pages/profit/Apply");
    },
    onLoad() {
      api.usercenter.getFansLists(
        this.uid,
        this.page,
        res => {
          console.log(res);

          if (res.pager.totalPages <= res.pager.nowPage) {
            this.loading = false;
            this.finished = true;
          }

          if (res.data.list.length < 1) {
            this.finished = true;
          }

          for (var i = 0; i < res.data.list.length; i++) {
            this.list.push(res.data.list[i]);
          }

          this.page += 1;
          this.loading = false;
        },
        res => {
          this.loading = false;
          this.finished = true;
          this.$toast(res.msg);
        }
      );
    },
    listClear() {
      this.list = [];
      this.page = 1;
    },
    getFans() {
      api.usercenter.getFansLists(this.uid, this.page, res => {
        this.type = res.member;
        if (res.member == 10) {
          this.listClear();
          this.onLoad();
        }
      });
    }
  },
  mounted() {
    this.getUserIsFenHong();
    this.getProfitRule();
    this.getFans();
  }
};
</script>

<style lang="less" scoped>
.main {
  .tabs {
    border-bottom: 5px solid #f2f2f2;
  }
  .content {
    .member {
      margin-top: -15vw;
    }
  }

  .item {
    display: flex;
    padding: 4vw;
    align-items: center;
    font-size: 4vw;
    border-bottom: 1px solid #f9f9f9;
    img {
      width: 12vw;
      height: 12vw;
      border-radius: 50%;
      margin-right: 3vw;
    }
  }
  .footer {
    position: fixed;
    width: 100vw;
    bottom: 0;
  }
  .foot-btn {
    width: 100%;
    border: 0;
    outline: none;
    position: fixed;
    bottom: 0;
    background: #008fef;
    color: #fff;
    font-size: 4vw;
    padding: 3vw 0;
  }
  .foot-btn.red {
    background: #ff0000;
  }

  .mt {
    margin-top: -15vw;
  }
}

.rule {
  padding: 2vw;
  margin-bottom: 10vw;
}
</style>